<template>
	<view>
		<view class="blank">
			<view class="blank-text">访客数(4)</view>
		</view>
		<view>
			<view class="flexItem ">
				<view class="flexItemMain ">
					<image class="flexItemLeftImg" src="../../static/pages/title.jpg" mode=""></image>
					<view class="flexItemCenter">
						<view class="flexItemCenterTop">酸酸酸奶</view>
						<view class="flexItemCenterBottom">
							<view class="age">
								<image class="sex" src="../../static/pages/sex1.png"></image>
								<span class="age-text">27</span>
							</view>
							<view class="address"><span class="address-text">珠海</span></view>
						</view>
					</view>
					<view class="flexItemRight">
						<view class="flexItemRightText">11:14</view>
					</view>
				</view>
				<view class="flexItemXian"></view>
				
			</view>
		</view>
		<view class="buttom">
			<view class="right"></view>
			<view class="middle">没有更多</view>
			<view class="right" style="margin-left: 15rpx;"></view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.blank{
		width: 100%;
		height: 60rpx;
		background: #F6F5FA;
	}
	.blank-text{
		margin: 8rpx 0rpx 0rpx 32rpx;
		font-size: 23rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #A3A4AD;
		line-height: 44rpx;
		display: inline-block;
	}
	.flexItemMain{
		  display: flex;
		  flex-direction: row;
		  align-items: center;
		  padding:25rpx 0;
		}
		.flexItemLeft{
		    flex: none;
		    border-radius: 100%;
		    overflow: hidden;
		    width:60rpx;
		    height:60rpx;
		    margin-left: 30rpx;
		    margin-right: 20rpx;
		}
		.flexItemLeftImg{
			width:110rpx;
			height: 110rpx;
			background: #F6F5FA;
			border-radius: 50%;
			flex: none;
			margin-right: 30rpx;
			margin-left:30rpx;
		}
		.flexItemLeft image{
		    width: 100%;
		    height: 100%;
		}
		.flexItemCenter{
			 flex: auto;
			 text-align: left;
			 /* margin-top: -20rpx; */
		}
		.flexItemCenterTop{
		    
		    font-size: 28rpx;
		    font-family: PingFang SC;
		    font-weight: bold;
		    color: #2B2937;
		    line-height: 44rpx;
		}
		.flexItemCenterBottom{
		     font-size: 12rpx;
			 margin-top: 10rpx;
			 display: flex;
			 flex-wrap: wrap;
		}
		.flexrow{
		     display: flex;
		     align-items: center;
		}
		.flexItemRight{
		     flex: none;
		     font-weight: bold;
		     font-size: 14rpx;
			 margin-top: -50rpx;
		}
		.flexItemRightText{
			font-size: 23rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #9C9AA7;
			line-height: 44rpx;
		}
		.flexItemRightImg{
			width: 20rpx;
			height: 20rpx;
			flex: none;
			margin-right: 30rpx;
			margin-left: 10rpx;
		}
		.flexItemRight:last-child{
			   margin-right: 30rpx;
		}
		.flexItemXian{
		   margin-right: 30rpx;
		   margin-left:30rpx;
		   height: 1rpx;
		   background-color: #DCDCDC;
		}
		.age{
			width: 72rpx;
			height: 33rpx;
			background: linear-gradient(-82deg, #FF8AB4, #FF73A4);
			border-radius: 16rpx;
		}
		.address{
			margin-left: 12rpx;
			width: 63rpx;
			height: 33rpx;
			background: linear-gradient(-82deg, #BB89FC, #987FFF);
			border-radius: 16rpx;
		}
		.address-text{
			/* display: inline-block; */
			position: absolute;
			font-size: 15rpx;
			font-family: PingFang SC;
			
			color: #FFFFFF;
			line-height: 44rpx;
			margin: -5rpx 0rpx 0rpx 5rpx;
		}
		.sex{
			width: 14rpx;
			height: 14rpx;
			margin: 10rpx 0rpx 0rpx 13rpx;
		}
		.age-text{
			margin: -10rpx 0rpx 0rpx 5rpx;
			position: absolute;
			font-size: 15rpx;
			font-family: PingFang SC;
			
			color: #FFFFFF;
			line-height: 44rpx;
		}
		.buttom{
			display: flex;
			flex-wrap: wrap;
			margin: 50rpx 0rpx 0rpx 269rpx;
		}
		.right{
			width: 38rpx;
			height: 1rpx;
			background: #D1D0E2;
		}
		.middle{
			margin: -23rpx 0rpx 0rpx 15rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #D1D0E2;
			line-height: 44rpx;
		}
</style>
